<template>
	<body-wrap>
		<!-- <top-search @comfirm="search" :formList="formList" :defaultDate="defaultDate"/> -->
		<view class="orderbox">
			<view class="orderItem" v-for="(dt,index) in lists || []" :key="dt.id">
				<view class="helpTitle">{{dt.serviceName}}</view>
				<view class="mList">
					<view class="mLi">
						<view class="label">姓名</view>
						<view class="txtVal">{{dt.memberName}}</view>
						<!-- <view class="imgbox">
							<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
						</view> -->
					</view>
					<view class="mLi">
						<view class="label">联系电话</view>
						<view class="txtVal">{{dt.memberPhone}}</view>
						<!-- <view class="imgbox">
							<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
						</view> -->
					</view>
					<view class="mLi">
						<view class="label">居住地址</view>
						<view class="txtVal">{{dt.memberAddress}}</view>
						<!-- <view class="imgbox">
							<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
						</view> -->
					</view>
					<view class="mLi">
						<view class="label">申请时间</view>
						<view class="txtVal">{{dt.createTime}}</view>
						<!-- <view class="imgbox">
							<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
						</view> -->
					</view>
					<view class="mLi">
						<view class="label">完成时间</view>
						<view class="txtVal">{{dt.serviceTime}}</view>
						<!-- <view class="imgbox">
							<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
						</view> -->
					</view>
				</view>
				<view class="itemStatus">
					<view class="btnbox">
						<text class="btn" v-if="dt.aidState==1">待服务</text>
						<text class="btn" v-else-if="dt.aidState==2">已派单</text>
						<text class="btn" v-else-if="dt.aidState==3">已服务</text>
						<text class="btn" v-else-if="dt.aidState==4">已审核</text>
						<text class="btn btn2" v-if="dt.aidState!=4" @click="goUload(dt)">完成</text>
						<!-- <navigator v-if="dt.aidState!=4" class="btn btn2" :url="'/pages/home/help/imgList/imgList?id='+dt.id">完成</navigator> -->
					</view>
				</view>
			</view>
			<empty v-if="lists && lists.length==0"/>
			<uni-load-more :status="status" v-if="lists.length>0"/>
		</view>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import {getServiceAidOrderList} from '@/api/index.js'
	import {topSearch} from "@/components/topSearch/topSearch.vue"
	import {dateFormat,setStorage} from "@/utils/common.js"
	import empty from "@/components/empty/empty.vue"
	export default defineComponent({
		components:{
			bodyWrap,
			//topSearch,
			empty
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
				pageNumber:1,
				pageSize:12,
				searchData:{},
				lists:'',
				total:0,
				status:'loading',
				st:'',
				defaultDate:[dateFormat('Y-m-d', new Date().getTime() - (86400 * 90) * 1000),dateFormat('Y-m-d', new Date().getTime())],
				formList:[
					{
						label:'服务名称',
						inputType:'text',
						key:'serviceName'
					},
					{
						label:'会员电话',
						inputType:'text',
						key:'memberPhone'
					}
				]
			})
			
			onPullDownRefresh(()=>{
				clearTimeout(state.st)
				state.pageNumber = 1
				state.status = 'loading'
				state.total = 0
				state.lists = ''
				getList()
				state.st = setTimeout(()=>{
					uni.stopPullDownRefresh();
				},1000)
			})
			onReachBottom(()=>{
				clearTimeout(state.st)
				if(state.status == 'loading'){
					state.pageNumber++
					state.st = setTimeout(()=>{
						getList()
					},1000)
				}
			})
			
			onShow(()=>{
				search({})
			})
			
			const getList = ()=>{
				getServiceAidOrderList({
					pageNumber:state.pageNumber,
					pageSize:state.pageSize,
					...state.searchData
				}).then(res =>{
					if(res.code !=0) return
					if(state.lists){
						state.lists = [...state.lists,...res.data.list]
					}else{
						state.lists = res.data.list || []
					}
					state.total = res.data.total
					if(state.lists.length>=state.total){
						state.status = 'noMore' // 加载完
					}
				})
			}
			
			const search = (obj)=>{
				state.searchData = obj
				state.pageNumber = 1
				state.status = 'loading'
				state.total = 0
				state.lists = ''
				getList()
			}
			
			const goUload = (item)=>{
				//console.log("item:",item)
				setStorage('aidOrderItem',JSON.stringify(item))
				uni.navigateTo({
					url:`/pages/home/help/imgList/imgList?id=${item.id}`
				})
			}
			
			return {
				...toRefs(state),
				getList,
				search,
				goUload
			}
		}
	})
</script>

<style lang="scss" scoped>
	.orderbox{
		box-sizing: border-box;
		width: 100%;
		//padding:120rpx 20rpx 20rpx 20rpx;
		padding:20rpx;
		.orderItem{
			box-sizing: border-box;
			width: 100%;
			border-radius: 20rpx;
			overflow: hidden;
			background: #fff;
			padding:20rpx 30rpx;
			&+.orderItem{
				margin-top: 30rpx;
			}
			.helpTitle{
				font-size: 34rpx;
				font-weight: bold;
				padding: 0 0 15rpx 0;
			}
			.itemStatus{
				display: flex;
				align-items: center;
				font-size: 30rpx;
				margin: 20rpx 0 0 0;
				.btnbox{
					display: flex;
					flex: 1;
					justify-content: flex-end;
					.btn{
						height: 70rpx;
						line-height: 70rpx;
						border-radius: 35rpx;
						//border: 1px solid #f99a14;
						color: #f99a14;
						padding: 0 20rpx;
						&.btn2{
							font-size: 28rpx;
							padding: 0 30rpx;
							background: #f99a14;
							color: #fff;
						}
						&+.btn{
							margin-left:20rpx ;
						}
					}
				}
			}
			.mList{
				.mLi{
					display: flex;
					height: 50rpx;
					line-height: 50rpx;
					background: #fff;
					font-size: 28rpx;
					padding: 0 ;
					margin: 0;
					.label{
						flex: 1;
						color: #7a7a7a;
					}
					.imgbox{
						width: 50rpx;
						height: 50rpx;
						transform: rotate(-90deg);
						-webkit-transform: rotate(-90deg);
						margin: 0rpx -20rpx 0 0;
						.icon{
							display: block;
							width:100%;
							height: 100%;
							opacity: 0.5;
						}
					}
				}
			}
		}
	}
</style>
